import React from 'react';
import ItemCard from '../ItemCard';

const RetrievalSection = ({ data, onItemHover, onItemLeave }) => {
    const itemVOList = data.data?.itemVOList || [];

    return (
        <div className="response-section retrieval-section">
            <div className="section-header">
                <span className="section-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M3 3v18h18"/>
                        <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/>
                    </svg>
                </span>
                <span className="section-title">指标检索结果</span>
                <span className="timestamp">{data.timestamp}</span>
            </div>
            <div className="section-content">
                <div className="items-grid-container">
                    <div className="items-grid">
                        {itemVOList.map((itemVO, idx) => (
                            <ItemCard
                                key={itemVO?.item?.itemUuid || `${itemVO?.item?.itemFullName || 'item'}-${idx}`}
                                item={itemVO.item}
                                similarity={itemVO.similarity}
                                index={idx}
                                onMouseEnter={onItemHover}
                                onMouseLeave={onItemLeave}
                                onClick={onItemHover}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default RetrievalSection;